<template>
  <div template>
    <tops nowposi="hide">
      <div template>
        <swiper style="height:230rpx;" previous-margin="150rpx" next-margin="150rpx" circular="true"
          @change="swiperchange">
          <swiper-item v-for="(v, i) in list">
            <div style="height:180rpx;_background-color:coral;transition:300ms;margin:0 30rpx;"
              :style="i == indexs ? 'transform:scale(1.15);margin-top:37rpx;' : 'margin-top:50rpx;'"
              @click="topages('/pages/detail/index')">
              <image style="width: 100%;height: 100%;border-radius: 10rpx 10rpx 0 0;overflow: hidden;" :src="v"></image>
            </div>
          </swiper-item>
        </swiper>
        <div>
          <u-notice-bar mode="vertical" :list="list2"></u-notice-bar>
        </div>
        <u-grid :col="4">
          <u-grid-item @click="topages('/pages/typeview/index')">
            <u-icon name="grid" :size="46"></u-icon>
            <view class="grid-text">分类</view>
          </u-grid-item>
          <u-grid-item>
            <u-icon name="lock" :size="46"></u-icon>
            <view class="grid-text">锁头</view>
          </u-grid-item>
          <u-grid-item>
            <u-icon name="hourglass" :size="46"></u-icon>
            <view class="grid-text">沙漏</view>
          </u-grid-item>
          <u-grid-item>
            <u-icon name="photo" :size="46"></u-icon>
            <view class="grid-text">图片</view>
          </u-grid-item>
        </u-grid>
        <!-- 今日推荐 -->
        <div class="smalltitle">
          <span class="smalltitle-left"></span> 今日特惠
        </div>
        <div>
          <div class="atvty-show-left">
            <div class="atvty-show-leftin">
              <img src="../../assets/20230517164305.png" style="width: 100%;height:100%" alt="" @click="todetail(3)">
            </div>
          </div>
          <div class="atvty-show-right">
            <div class="atvty-show-rightin">
              <img src="../../assets/20230517164415.png" style="width: 100%;height:100%" alt="" @click="todetail(3)">
            </div>
            <div class="atvty-show-rightin">
              <img src="../../assets/20230517164605.png" style="width: 100%;height:100%" alt="" @click="todetail(3)">
            </div>
          </div>
          <div style="clear: both;"></div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="smalltitle">
          <span class="smalltitle-left"></span> 猜您喜欢
        </div>
        <div style="border-bottom: 2rpx solid #e0e0e0;" v-for="v in 3">
          <com_shopitem imgtype="left" :imgurl="shopimg">
            <div template>
              <div style="padding-top:20rpx">
                产品标题
              </div>
              <div style="padding-top:20rpx;color: #999;">
                产品简介
              </div>
            </div>
          </com_shopitem>
        </div>
      </div>
    </tops>
  </div>
</template>

<script>
import item1 from '../../assets/20230517154820.png'
import item2 from '../../assets/20230517154909.png'
import item3 from '../../assets/20230517154948.png'
import shopimg from '../../assets/20230517164415.png'
import com_shopitem from '../../components/shopitem.vue'
export default {
  data() {
    return {
      indexs: 0,
      list: [
        item1,
        item2,
        item3,
        item1,
        item2
      ],
      shopimg,
      list2: [
        '寒雨连江夜入吴',
        '平明送客楚山孤',
        '洛阳亲友如相问',
        '一片冰心在玉壶'
      ]
    }
  },
  components: {
    com_shopitem,
  },
  onLoad() { },
  methods: {
    swiperchange(e) {
      this.indexs = e.detail.current
    },
    topages(l) {
      uni.navigateTo({ url: l })
    }
  },
}
</script>

<style scoped>
.item {
  height: 300rpx;
  background-color: burlywood;
}

.smalltitle {
  padding: 20rpx;
  /* background-color: #fff3e2; */
  background-color: #eee;
  color: #e45454;
  font-weight: 800;
}

.smalltitle-left {
  display: inline-block;
  margin-right: 10rpx;
  width: 10rpx;
  height: 20rpx;
  background-color: #e45454;
}

.atvty-show-left,
.atvty-show-right {
  float: left;
  width: 50%;
  height: 601rpx;
}

.atvty-show-leftin {
  height: 601rpx;
  border-right: 2rpx solid white;
  background-color: #e1e1e1;
}

.atvty-show-rightin {
  height: 300rpx;
  border-bottom: 2rpx solid white;
  background-color: #e1e1e1;
}
</style>
